<template>
    <div class="title-config">
        <!-- 标题内容 -->
        <div class="form-item">
            <label>标题：</label>
            <input type="text" v-model="local.title" />
        </div>
        <!-- 副标题内容 -->
        <div class="form-item">
            <label>副标题：</label>
            <input type="text" v-model="local.subTitle" />
        </div>
        <!-- 显示位置 -->
        <div class="form-item">
            <label>位置：</label>
            <button @click="local.align = 'left'" :class="{ active: local.align === 'left' }">
                居左
            </button>
            <button @click="local.align = 'center'" :class="{ active: local.align === 'center' }">
                居中
            </button>
        </div>
        <!-- 标题大小 -->
        <div class="form-item">
            <label>标题大小：</label>
            <button @click="local.titleSize = 16" :class="{ active: local.titleSize === 16 }">
                16号
            </button>
            <button @click="local.titleSize = 14" :class="{ active: local.titleSize === 14 }">
                14号
            </button>
            <button @click="local.titleSize = 12" :class="{ active: local.titleSize === 12 }">
                12号
            </button>
        </div>
        <!-- 副标题大小 -->
        <div class="form-item">
            <label>副标题大小：</label>
            <button @click="local.subSize = 12" :class="{ active: local.subSize === 12 }">
                12号
            </button>
            <button @click="local.subSize = 14" :class="{ active: local.subSize === 14 }">
                14号
            </button>
            <button @click="local.subSize = 16" :class="{ active: local.subSize === 16 }">
                16号
            </button>
        </div>
        <!-- 标题粗细 -->
        <div class="form-item">
            <label>标题粗细：</label>
            <button
                @click="local.titleWeight = 'bold'"
                :class="{ active: local.titleWeight === 'bold' }"
            >
                加粗
            </button>
            <button
                @click="local.titleWeight = 'normal'"
                :class="{ active: local.titleWeight === 'normal' }"
            >
                常规
            </button>
        </div>
        <!-- 标题颜色 -->
        <div class="form-item">
            <label>标题色：</label>
            <div class="color-group">
                <ColorPicker
                    v-model:="local.titleColor"
                    :show-alpha="true"
                    @update:pureColor="(val) => (local.titleColor = val)"
                    class="color-picker"
                ></ColorPicker>
                <div
                    class="color-prev"
                    :style="{ background: local.titleColor, border: '1px solid #eee' }"
                ></div>
                <input
                    type="text"
                    v-model="local.titleColor"
                    class="color-input"
                    placeholder="#000/rgb(0,0,0)"
                    @blur="checkColor('titleColor')"
                />
            </div>
        </div>
        <!-- 副标题颜色 -->
        <div class="form-item">
            <label>副标题色：</label>
            <div class="color-group">
                <ColorPicker
                    v-model:="local.subColor"
                    :show-alpha="true"
                    @update:pureColor="(val) => (local.subColor = val)"
                    class="color-picker"
                ></ColorPicker>
                <div
                    class="color-prev"
                    :style="{ background: local.subColor, border: '1px solid #eee' }"
                ></div>
                <input
                    type="text"
                    v-model="local.subColor"
                    class="color-input"
                    placeholder="#666/rgb(102,102,102)"
                    @blur="checkColor('subColor')"
                />
            </div>
        </div>
        <!-- 背景颜色 -->
        <div class="form-item">
            <label>背景色：</label>
            <div class="color-group">
                <ColorPicker
                    v-model:="local.bgColor"
                    :show-alpha="true"
                    @update:pureColor="(val) => (local.bgColor = val)"
                    class="color-picker"
                ></ColorPicker>
                <div
                    class="color-prev"
                    :style="{
                        background: local.bgColor,
                        border: '1px solid #eee',
                        backgroundImage:
                            'linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%)',
                        backgroundSize: '8px 8px',
                        backgroundPosition: '0 0,4px 4px',
                    }"
                ></div>
                <input
                    type="text"
                    v-model="local.bgColor"
                    class="color-input"
                    placeholder="#fff/rgb(255,255,255)"
                    @blur="checkColor('bgColor')"
                />
            </div>
        </div>
        <!-- 保存按钮 -->
        <button @click="save" class="save-btn">保存配置</button>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ColorPicker } from 'vue3-colorpicker'
import 'vue3-colorpicker/style.css'

// 接收父组件配置
const props = defineProps({
    config: {
        type: Object,
        required: true,
        default: () => ({
            title: '',
            subTitle: '',
            align: 'left',
            titleSize: 16,
            subSize: 12, 
            titleWeight: 'bold',
            titleColor: '#000000',
            subColor: '#666666', 
            bgColor: 'rgba(255,255,255,1)',
        }),
    },
})

// 子组件本地配置
const local = ref({ ...props.config })
// 向父组件传值
const emit = defineEmits(['onSave'])

// 验证颜色格式
const checkColor = (colorKey) => {
    // 颜色正则：支持hex、rgb、rgba
    const hexReg = /^#([0-9A-F]{3}|[0-9A-F]{6})$/i
    const rgbReg = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/
    const rgbaReg =
        /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0(\.\d+)?|1(\.0+)?)\s*\)$/

    const color = local.value[colorKey]
    // 默认颜色配置
    const defaultColors = {
        titleColor: '#000000',
        subColor: '#666666',
        bgColor: 'rgba(255,255,255,1)',
    }

    // 验证颜色格式
    if (hexReg.test(color)) return true
    const rgbMatch = color.match(rgbReg)
    if (rgbMatch) {
        const [r, g, b] = rgbMatch.slice(1).map(Number)
        if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) return true
    }
    const rgbaMatch = color.match(rgbaReg)
    if (rgbaMatch) {
        const [r, g, b, a] = rgbaMatch.slice(1).map(Number)
        if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255 && a >= 0 && a <= 1)
            return true
    }

    // 格式错误：重置为默认色
    local.value[colorKey] = defaultColors[colorKey]
    alert(`颜色格式无效！示例：#000、rgb(0,0,0)，已重置为默认色`)
    return false
}

// 保存配置
const save = () => {
    const titleValid = checkColor('titleColor')
    const subValid = checkColor('subColor')
    const bgValid = checkColor('bgColor')

    if (titleValid && subValid && bgValid) {
        emit('onSave', { ...local.value })
    }
}

// 监听父组件配置变化，同步到本地
watch(
    () => props.config,
    (newConfig) => {
        local.value = { ...newConfig }
    },
    { deep: true }
)
</script>

<style scoped>
.title-config {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    background: #f9f9f9;
    max-width: 600px;
    margin: 0 auto;
}

.form-item {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.form-item label {
    width: 80px; /* 缩短标签宽度，更紧凑 */
    flex-shrink: 0;
    font-weight: 500;
    color: #333;
}

.form-item input[type='text'] {
    flex: 1;
    min-width: 200px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s, box-shadow 0.3s;
    font-size: 14px;
}
.form-item input[type='text']:focus {
    border-color: #ff7b00;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 123, 0, 0.2);
}

/* 按钮样式 */
.form-item button {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    font-weight: 500;
    font-size: 14px;
    margin-right: 8px; /* 增加按钮间距，更易点击 */
}
.form-item button:hover {
    background: #f5f5f5;
    border-color: #bbb;
}
.form-item button.active {
    background: #ff7b00;
    color: #fff;
    border-color: #ff7b00;
    box-shadow: 0 2px 4px rgba(255, 123, 0, 0.3);
}

/* 颜色选择组 */
.color-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 280px;
}

.color-picker {
    width: 42px;
    height: 32px;
    flex-shrink: 0;
}
/* 颜色选择器内部样式 */
:deep(.vc-colorpicker-trigger) {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #ddd;
    cursor: pointer;
}
:deep(.vc-colorpicker-panel) {
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}
:deep(.vc-alpha-slider) {
    height: 8px;
    margin: 8px 0;
}

/* 颜色预览块 */
.color-prev {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.3s;
}

/* 颜色输入框 */
.color-input {
    flex: 1;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s, box-shadow 0.3s;
    font-size: 14px;
}
.color-input:focus {
    border-color: #ff7b00;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 123, 0, 0.2);
}

/* 保存按钮 */
.save-btn {
    width: 100%;
    padding: 12px;
    background: #ff7b00;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: background 0.3s;
    margin-top: 10px;
}
.save-btn:hover {
    background: #e66a00;
}
.save-btn:active {
    background: #cc5f00;
}
</style>